<template>
  <div class="bgContainer">
    <div class="container">
      <div class="header">
        <h1>高校寝室消防安全排查系统</h1>
      </div>
      <div class="overview">
        <div class="stat-card">
          <h3>总寝室数</h3>
          <div class="value">{{ overview.totalDorms }}</div>
        </div>
        <div class="stat-card">
          <h3>已检查寝室</h3>
          <div class="value">{{ overview.checkedDorms }}</div>
        </div>
        <div class="stat-card">
          <h3>安全率</h3>
          <div class="value">{{ overview.safetyRate }}%</div>
        </div>
        <div class="stat-card">
          <h3>发现问题数</h3>
          <div class="value">{{ overview.issuesFound }}</div>
        </div>
      </div>
      <div class="dashboard">
        <div class="card" ref="issueTypesChartRef"></div>
        <div class="card" ref="buildingIssuesChartRef"></div>
        <div class="card" ref="monthlyTrendChartRef"></div>
        <div class="card">
          <h3>问题详情</h3>
          <div class="issue-list">
            <div class="issue-item" v-for="issue in issueTypes" :key="issue.name">
              <span class="issue-name">{{ issue.name }}</span>
              <span class="issue-value">{{ issue.value }}个</span>
            </div>
          </div>
        </div>
      </div>
      <div class="rectification-section">
        <div class="card" ref="rectificationStatusChartRef"></div>
        <div class="card" ref="rectificationProgressChartRef"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from 'axios';

// 数据状态
const overview = ref({
  totalDorms: 1000,
  checkedDorms: 850,
  safetyRate: 95,
  issuesFound: 45
});
// const issueTypes = ref([]);
const issueTypes = ref([
  { name: '消防设备缺失', value: 15 },
  { name: '电线老化', value: 10 },
  { name: '违规用电', value: 8 },
  { name: '安全通道堵塞', value: 7 },
  { name: '其他问题', value: 5 }
]);

// 图表引用
const issueTypesChartRef = ref(null);
// const buildingIssuesChartRef = ref(null);
const buildingIssuesChartRef = ref([{ "name": "1号楼", "value": 8 }, { "name": "2号楼", "value": 12 }, { "name": "3号楼", "value": 6 }, { "name": "4号楼", "value": 10 }, { "name": "5号楼", "value": 9 }]);
// const monthlyTrendChartRef = ref(null);
const monthlyTrendChartRef = ref([
  { month: '1月', value: 120 },
  { month: '2月', value: 150 },
  { month: '3月', value: 180 },
  { month: '4月', value: 200 },
  { month: '5月', value: 220 },
  { month: '6月', value: 180 }
])
// const rectificationStatusChartRef = ref(null);
const rectificationStatusChartRef = ref([
  { name: '已完成整改', value: 30, color: '#4ecb73' },
  { name: '整改中', value: 10, color: '#ff9f40' },
  { name: '未开始整改', value: 5, color: '#ff6384' }
]);

// const rectificationProgressChartRef = ref(null);
const rectificationProgressChartRef = ref([
  { date: '2024-01', completed: 5, inProgress: 3, pending: 7 },
  { date: '2024-02', completed: 8, inProgress: 4, pending: 3 },
  { date: '2024-03', completed: 12, inProgress: 5, pending: 2 },
  { date: '2024-04', completed: 15, inProgress: 7, pending: 1 },
  { date: '2024-05', completed: 20, inProgress: 8, pending: 0 },
  { date: '2024-06', completed: 30, inProgress: 10, pending: 5 }

]);

// 初始化图表
const initCharts = () => {
  const issueTypesChart = echarts.init(issueTypesChartRef.value);
  const buildingIssuesChart = echarts.init(buildingIssuesChartRef.value);
  const monthlyTrendChart = echarts.init(monthlyTrendChartRef.value);
  const rectificationStatusChart = echarts.init(rectificationStatusChartRef.value);
  const rectificationProgressChart = echarts.init(rectificationProgressChartRef.value);

  // 示例数据，实际中应从后端获取
  issueTypesChart.setOption({
    title: {
      text: '问题类型分布',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    series: [{
      name: '问题类型',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#0f1c3c',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold',
          color: '#fff'
        }
      },
      labelLine: {
        show: false
      },
      data: [{ "name": "消防设备缺失", "value": 15 }, { "name": "电线老化", "value": 10 }, { "name": "违规用电", "value": 8 }, { "name": "安全通道堵塞", "value": 7 }, { "name": "其他问题", "value": 5 }],
      color: ['#4ecb73', '#36a2eb', '#ff6384', '#ff9f40', '#9966ff']
    }]
  });


  buildingIssuesChart.setOption({
    title: {
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal'
      },
      text: '各楼栋问题统计',
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['楼栋1', '楼栋2', '楼栋3', '楼栋4'],
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [{
      name: '问题数量',
      type: 'bar',
      data: [20, 15, 23, 45],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4ecb73' },
          { offset: 1, color: '#2a8c4a' }
        ]),
        borderRadius: [5, 5, 0, 0]
      },
      barWidth: '40%'
    }]
  });

  monthlyTrendChart.setOption({

    title: {
      text: '月度检查趋势',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月'],
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },
    series: [{
      name: '检查数量',
      type: 'line',
      smooth: true,
      data: [20, 30, 25, 40, 35],
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(78, 203, 115, 0.3)' },
          { offset: 1, color: 'rgba(78, 203, 115, 0.1)' }
        ])
      },
      itemStyle: {
        color: '#4ecb73'
      },
      lineStyle: {
        width: 3
      },
      symbol: 'circle',
      symbolSize: 8
    }]

  });

  rectificationStatusChart.setOption({

    title: {
      text: '整改状态分布',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal'
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff'
      }
    },
    series: [{
      name: '整改状态',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#0f1c3c',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold',
          color: '#fff'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 20, name: '整改中' },
        { value: 40, name: '已完成' },
        { value: 40, name: '未整改' },
      ],
    }]

  });

  rectificationProgressChart.setOption({

    title: {
      text: '整改进度趋势',
      textStyle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'normal'
      },
      left: 'center',
      top: 20
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function (params) {
        let result = params[0].axisValue + '<br/>';
        params.forEach(param => {
          result += param.marker + ' ' + param.seriesName + ': ' + param.value + '个<br/>';
        });
        return result;
      }
    },
    legend: {
      data: ['已完成', '整改中', '未开始'],
      textStyle: {
        color: '#fff'
      },
      top: 60,
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 20
    },
    grid: {
      left: '3%',
      right: '4%',
      top: '25%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ["2024-01", "2024-02", "2024-03", "2024-04", "2024-05", "2024-06"],
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        interval: 0,
        rotate: 30
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        formatter: '{value}个'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }
    },
    series: [
      {
        name: '已完成',
        type: 'line',
        smooth: true,
        data: [11, 3, 4, 15, 6, 5],
        itemStyle: {
          color: '#4ecb73'
        },
        lineStyle: {
          width: 3
        },
        symbol: 'circle',
        symbolSize: 8,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(78, 203, 115, 0.3)' },
            { offset: 1, color: 'rgba(78, 203, 115, 0.1)' }
          ])
        },
        emphasis: {
          focus: 'series',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
          }
        }
      },
      {
        name: '整改中',
        type: 'line',
        smooth: true,
        data: [11, 13, 14, 15, 16, 25],
        itemStyle: {
          color: '#ff9f40'
        },
        lineStyle: {
          width: 3
        },
        symbol: 'circle',
        symbolSize: 8,
        emphasis: {
          focus: 'series',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
          }
        }
      },
      {
        name: '未开始',
        type: 'line',
        smooth: true,
        data: [12, 13, 24, 15, 6, 5],
        itemStyle: {
          color: '#ff6384'
        },
        lineStyle: {
          width: 3
        },
        symbol: 'circle',
        symbolSize: 8,
        emphasis: {
          focus: 'series',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff'
          }
        }
      }
    ]

  });
};

// 获取数据
const fetchData = async () => {
  try {
    // const overviewResponse = await axios.get('/api/overview');
    // overview.value = overviewResponse.data;

    // const issueTypesResponse = await axios.get('/api/issueTypes');
    // issueTypes.value = issueTypesResponse.data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// 生命周期钩子
onMounted(() => {
  initCharts();
  fetchData();
});
</script>

<style scoped>
.bgContainer {
  background: linear-gradient(135deg, #0f1c3c 0%, #1a2b4d 100%);
  color: #fff;
  font-family: 'Noto Sans SC', sans-serif;
  min-height: 100vh;
}

.container {
  padding: 20px;
  max-width: 1920px;
  margin: 0 auto;
}

.header {
  text-align: center;
  padding: 30px 0;
  position: relative;
  margin-bottom: 30px;
}

.header h1 {
  font-size: 36px;
  font-weight: 700;
  background: linear-gradient(90deg, #fff 0%, #4ecb73 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(78, 203, 115, 0.3);
  margin-bottom: 10px;
}

.header::after {
  content: '';
  display: block;
  width: 200px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #4ecb73, transparent);
  margin: 0 auto;
}

.overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
  padding: 0 20px;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 0 20px;
  margin-bottom: 30px;
}

.rectification-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 0 20px;
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  padding: 25px;
  height: 400px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.card h3 {
  font-size: 18px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(78, 203, 115, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.stat-card:hover::before {
  transform: translateX(100%);
}

.stat-card h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.stat-card .value {
  font-size: 32px;
  font-weight: bold;
  color: #4ecb73;
  text-shadow: 0 0 10px rgba(78, 203, 115, 0.3);
}

.issue-list {
  margin-top: 20px;
  flex: 1;
  overflow-y: auto;
  color: '#fff';
  font-size: 18;
  font-weight: 'normal'
}

.issue-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.issue-item:hover {
  background: rgba(255, 255, 255, 0.05);
  padding-left: 10px;
}

.issue-name {
    color: '#fff';
  font-size: 18;
  font-weight: 'normal'
  /* color: rgba(255, 255, 255, 0.8); */
}

.issue-value {
  color:greenyellow;
  font-size: 18;
  font-weight: 'normal'
}
</style>